<template>
  <div class="auto-scroll-table-container">
    <table class="auto-scroll-table">
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.key" :style="{ width: column.width || 'auto' }">
            {{ column.title }}
          </th>
        </tr>
      </thead>
    </table>
    <div class="table-body-container" ref="scrollContainer">
      <table class="auto-scroll-table">
        <tbody ref="tableBody">
          <tr v-for="(row, index) in data" :key="index" :class="{ highlight: index % 2 === 0 }">
            <td v-for="column in columns" :key="column.key" :style="{ width: column.width || 'auto' }">
              {{ row[column.key] }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';

export default {
  name: 'AutoScrollTable',
  props: {
    columns: {
      type: Array,
      required: true,
      // Each column should have: { key: string, title: string, width: string (optional) }
    },
    data: {
      type: Array,
      required: true,
    },
    scrollSpeed: {
      type: Number,
      default: 40, // pixels per second
    },
    pauseOnHover: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: '300px',
    }
  },
  setup(props) {
    const scrollContainer = ref(null);
    const tableBody = ref(null);
    let scrollPosition = 0;
    let isHovering = false;
    let animationFrameId = null;
    let lastTimestamp = 0;
    
    // Calculate the maximum scroll position
    const getMaxScroll = () => {
      if (!tableBody.value || !scrollContainer.value) return 0;
      return Math.max(0, tableBody.value.clientHeight - scrollContainer.value.clientHeight);
    };
    
    const animate = (timestamp) => {
      if (!lastTimestamp) lastTimestamp = timestamp;
      const elapsed = timestamp - lastTimestamp;
      
      // Only scroll if not hovering or pauseOnHover is false
      if (!isHovering || !props.pauseOnHover) {
        // Calculate scroll amount based on speed and elapsed time
        const scrollAmount = (props.scrollSpeed / 1000) * elapsed;
        scrollPosition += scrollAmount;
        
        const maxScroll = getMaxScroll();
        
        // If we've scrolled to the bottom, reset to the top
        if (scrollPosition >= maxScroll) {
          scrollPosition = 0;
        }
        
        // Apply the scroll position
        if (scrollContainer.value) {
          scrollContainer.value.scrollTop = scrollPosition;
        }
      }
      
      lastTimestamp = timestamp;
      animationFrameId = requestAnimationFrame(animate);
    };
    
    const startScrolling = () => {
      lastTimestamp = 0;
      animationFrameId = requestAnimationFrame(animate);
    };
    
    const stopScrolling = () => {
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
      }
    };
    
    const handleMouseEnter = () => {
      isHovering = true;
    };
    
    const handleMouseLeave = () => {
      isHovering = false;
    };
    
    // Start animation when component is mounted
    onMounted(() => {
      if (scrollContainer.value && tableBody.value) {
        scrollContainer.value.addEventListener('mouseenter', handleMouseEnter);
        scrollContainer.value.addEventListener('mouseleave', handleMouseLeave);
        startScrolling();
      }
    });
    
    // Clean up animation frame when component is unmounted
    onBeforeUnmount(() => {
      stopScrolling();
      if (scrollContainer.value) {
        scrollContainer.value.removeEventListener('mouseenter', handleMouseEnter);
        scrollContainer.value.removeEventListener('mouseleave', handleMouseLeave);
      }
    });
    
    // Restart animation if data changes
    watch(() => props.data, () => {
      stopScrolling();
      scrollPosition = 0;
      startScrolling();
    });
    
    return {
      scrollContainer,
      tableBody
    };
  }
};
</script>

<style scoped>
.auto-scroll-table-container {
  position: relative;
  border-radius: 0.6rem;
  overflow: hidden;
  background: transparent;
}

.auto-scroll-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background: transparent;
}

.auto-scroll-table th {
  position: sticky;
  top: 0;
  background: rgba(60, 60, 60, 0.5);
  color: white;
  font-weight: 600;
  padding: 0.8rem 0.9rem;
  text-align: left;
  border-bottom: 0.1rem solid rgba(80, 80, 80, 0.5);
  z-index: 10;
  backdrop-filter: blur(5px);
}

.auto-scroll-table td {
  padding: 0.3rem 0.9rem;
  border-bottom: 1px solid rgba(80, 80, 80, 0.3);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: rgb(255, 162, 0);
  background: transparent;
}

.table-body-container {
  overflow: hidden;
  position: relative;
  height: v-bind(height);
  background: transparent;
}

.highlight {
  background: rgba(70, 70, 70, 0.2);
}

tr:hover td {
  background: rgba(90, 90, 90, 0.3);
}
</style>